import React from 'react';
import {
    Checkbox,
    Table, Input
} from 'antd';
import { connect } from 'umi';

const { Search } = Input;
class ViewPage extends React.Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            loading: false,
            pageIndex: 1,
            pageSize: 10,
            dataSource: [],
        }
    }
    componentDidMount() {
        this.fetchDatas();
    }
    fetchDatas = () => {
        const { pageIndex, keywords, pageSize } = this.state;
        this.setState({ loading: true });
        this.props.dispatch({
            type: "Abp/getList",
            payload: { SkipCount: (pageIndex - 1) * pageSize, MaxResultCount: pageSize, keywords },
            control: 'POHeader',
        }).then(() => {
            var resp = this.props.response;
            if (resp) {
                this.setState({
                    dataSource: resp.result?.items,
                    loading: false,
                    totalCount: resp.result?.totalCount
                });
            }
        });
    }
    setCurrent = (obj?: any) => {
        if (this.props.setCurrent) {
            this.props.setCurrent(obj);
        }
    }
    onSearch = (keywords: string) => {
        let _this = this;
        this.setState({ keywords }, function () {
            _this.fetchDatas()
        })
    };
    render() {
        const { loading, dataSource, totalCount, pageSize } = this.state;
        const columns = [
            {
                title: '采购单',
                dataIndex: 'poNum',
                key: 'poNum',
            }, 
            {
                title: '采购员',
                dataIndex: 'buyerID',
                key: 'buyerID',
            },         
            {
                title: '已核准',
                render: (record: any) =>
                    <span><Checkbox checked={record.approve} /></span>
            },
        ];
        return (
            <>
                <Search
                    placeholder="关键词搜索"
                    allowClear
                    enterButton
                    onSearch={this.onSearch}
                />
                <Table
                    onRow={record => {
                        return {
                            onClick: () => { },
                            onDoubleClick: () => { this.setCurrent(record) },
                        };
                    }}
                    pagination={{
                        onChange: page => {
                            this.setState({ pageIndex: page }, () => {
                                this.fetchDatas();
                            });
                        },
                        pageSize,
                        total: totalCount,
                    }}
                    rowKey="id" size="small" columns={columns} dataSource={dataSource} loading={loading} />
            </>
        )
    }
}
export default connect(({ Abp }: API.IConnectState) => ({
    response: Abp.response,
    currentUser: Abp.currentUser,
}))(ViewPage);